<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>手把手教创建 vue3.x vite 项目 | vue-next-admin</title>
    <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
    <link rel="stylesheet" href="/vue-next-admin-doc-preview/assets/style.5cebb62a.css">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/Home.d1c70b92.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/AlgoliaSearchBox.56b5b4ad.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/app.9cc95a61.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/home_fast_index.md.716712dd.lean.js">
    
    <link rel="icon" href="/vue-next-admin-doc-preview/images/favicon.ico">
  <meta name="keywords" content="doc、vue-next-admin、vue-next-admin-doc、vue3、element-plus、vuejs/vue-next">
  <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
  <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?dd9ada7b25f65a181a42780f04b764e6";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
  <meta name="twitter:title" content="手把手教创建 vue3.x vite 项目 | vue-next-admin">
  <meta property="og:title" content="手把手教创建 vue3.x vite 项目 | vue-next-admin">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-fcf5c4a8><div class="sidebar-button" data-v-fcf5c4a8><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/vue-next-admin-doc-preview/" aria-label="vue-next-admin, back to home" data-v-fcf5c4a8 data-v-4424da2c><img class="logo" src="/vue-next-admin-doc-preview/images/logo-mini.svg" alt="Logo" data-v-4424da2c> vue-next-admin</a><div class="flex-grow" data-v-fcf5c4a8></div><div class="nav" data-v-fcf5c4a8><nav class="nav-links" data-v-fcf5c4a8 data-v-107a016c><!--[--><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item active" href="/vue-next-admin-doc-preview/home/" data-v-e720f45e>指南 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item" href="/vue-next-admin-doc-preview/config/" data-v-e720f45e>配置参考 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>集成后端</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@熊猫 PandaGoAdmin</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://www.gnet.top/public" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 GoPro平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>线上演示</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue3.x 版本预览（vue-next-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue2.x 版本预览（vue-prev-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-e720f45e>更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>代码仓库</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>gitee（国内：实时更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>github（国外：定期更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noopener noreferrer" data-v-e720f45e>文档仓库 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-34c05c3a><nav class="nav-links nav" data-v-34c05c3a data-v-107a016c><!--[--><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item active" href="/vue-next-admin-doc-preview/home/" data-v-e720f45e>指南 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item" href="/vue-next-admin-doc-preview/config/" data-v-e720f45e>配置参考 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>集成后端</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@熊猫 PandaGoAdmin</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://www.gnet.top/public" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 GoPro平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>线上演示</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue3.x 版本预览（vue-next-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue2.x 版本预览（vue-prev-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-e720f45e>更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>代码仓库</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>gitee（国内：实时更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>github（国外：定期更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noopener noreferrer" data-v-e720f45e>文档仓库 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-34c05c3a><!--[--><li class="sidebar-link"><p class="sidebar-link-item">入门须知</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/">许可</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/compatible/">兼容性</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/forPeople/">适用人群</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/doc/">学习文档</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/thank/">特别鸣谢</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">开发指南</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/introduce/">介绍</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/install/">安装</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/vue-next-admin-doc-preview/home/fast/">快速上手</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#安装-vite">安装 vite</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#配置-vite">配置 vite</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#安装-typescript">安装 typescript</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#安装-element-plus">安装 element-plus</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#安装-sass-sass-loader">安装 sass sass-loader</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#定义-element-plus-主题">定义 Element Plus 主题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#安装-vue-router-next">安装 vue-router-next</a><!----></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">代码规范</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/eslint/">eslint</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/prettier/">prettier</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/vscode/">vsCode 配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/home/gitPush/">git 提交规范</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-1c2e469b><div class="container" data-v-1c2e469b><!--[--><!--]--><div style="position:relative;" class="content" data-v-1c2e469b><div><h1 id="手把手教创建-vue3-x-vite-项目" tabindex="-1">手把手教创建 vue3.x vite 项目 <a class="header-anchor" href="#手把手教创建-vue3-x-vite-项目" aria-hidden="true">#</a></h1><div class="tip custom-block"><p class="custom-block-title">兼容性注意</p><p>Vite 需要 <a href="http://nodejs.cn/" target="_blank" rel="noopener noreferrer">Node.js</a> 版本 &gt;= 12.0.0。</p></div><h2 id="安装-vite" tabindex="-1">安装 vite <a class="header-anchor" href="#安装-vite" aria-hidden="true">#</a></h2><div class="language-bash"><pre><code><span class="token comment"># 全局安装 vite</span>
<span class="token function">npm</span> <span class="token function">install</span> create-vite-app -g

<span class="token comment"># 创建项目，xxx 为项目名称</span>
create-vite-app xxx

<span class="token comment"># 进入目录</span>
<span class="token builtin class-name">cd</span> xxx

<span class="token comment"># 安装依赖</span>
<span class="token function">npm</span> <span class="token function">install</span>

<span class="token comment"># 运行</span>
<span class="token function">npm</span> run dev
</code></pre></div><h2 id="配置-vite" tabindex="-1">配置 vite <a class="header-anchor" href="#配置-vite" aria-hidden="true">#</a></h2><p>在项目根目录中创建一个 <code>vite.config.js</code> 或 <code>vite.config.ts</code> 文件（与 vue.config.js 一样）。如果在当前工作目录中找到 <code>Vite</code>，它将自动使用它。</p><ul><li>vite 最新文档（英文）：<a href="https://vitejs.dev/index.html" target="_blank" rel="noopener noreferrer">https://vitejs.dev/index.html</a></li></ul><p>配置 <code>vite.config.ts</code>：</p><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> UserConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vite&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> viteConfig<span class="token operator">:</span> UserConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
  server<span class="token operator">:</span> <span class="token punctuation">{</span>
    port<span class="token operator">:</span> <span class="token number">8080</span><span class="token punctuation">,</span> <span class="token comment">// 端口号g</span>
    hostname<span class="token operator">:</span> <span class="token string">&quot;localhost&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 主机名</span>
    open<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 运行自动打开浏览器</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> viteConfig<span class="token punctuation">;</span>
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">vite 配置参考</p><ul><li>github：<a href="https://github.com/vitejs/vite/blob/73196e517643af88a790ab5222d3e6b68dbbf987/packages/vite/src/node/config.ts" target="_blank" rel="noopener noreferrer">github/vite/config.ts</a></li><li>issues：<a href="https://github.com/vitejs/vite/issues/1467" target="_blank" rel="noopener noreferrer">https://github.com/vitejs/vite/issues/1467</a></li><li>plugins：<a href="https://github.com/rollup/plugins/tree/master/packages/alias#entries" target="_blank" rel="noopener noreferrer">alias#entries</a></li></ul></div><h2 id="安装-typescript" tabindex="-1">安装 typescript <a class="header-anchor" href="#安装-typescript" aria-hidden="true">#</a></h2><p style="font-weight:bold;"> 一、安装</p><div class="language-bash"><pre><code><span class="token comment"># 安装</span>
cnpm <span class="token function">install</span> typescript --save-dev

<span class="token comment"># 初始化 tsconfig.json，注意初始化时与安装 typescript 同级（项目根目录）</span>
npx tsc --init
</code></pre></div><p style="font-weight:bold;">二、改成 `.ts` 后缀</p><p>将 <code>main.js</code> 修改为 <code>main.ts</code>，同时将 <code>index.html</code> 里面的引用也修改为 <code>main.ts</code>，然后在 <code>script</code> 里添加 <code>lang=&quot;ts&quot;</code></p><p><code>index.html</code></p><div class="language-html"><pre><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/favicon.ico<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Vite App<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>module<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/src/main.ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><code>app.vue</code></p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Vue logo<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./assets/logo.png<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>HelloWorld</span> <span class="token attr-name">msg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Hello Vue 3.0 + Vite<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> HelloWorld <span class="token keyword">from</span> <span class="token string">&quot;./components/HelloWorld.vue&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;App&quot;</span><span class="token punctuation">,</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span>
      HelloWorld<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p style="font-weight:bold;">三、出现问题：找不到模块 `./App.vue` 或其相应的类型声明</p><p>打开 main.ts 会发现 <code>import App from App.vue</code> 会报错: 找不到模块 <code>./App.vue</code> 或其相应的类型声明，这是因为现在 ts 还没有识别 vue 文件，需要进行下面的配置：</p><p>在项目根目录添加 <code>shim.d.ts</code> 文件：</p><div class="language-ts"><pre><code><span class="token keyword">declare</span> <span class="token keyword">module</span> <span class="token string">&quot;*.vue&quot;</span> <span class="token punctuation">{</span>
  <span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> DefineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> component<span class="token operator">:</span> DefineComponent<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> component<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p style="font-weight:bold;">四、出现问题：安装了 `Vetur` 的话，出现 `[vue/no-multiple-template-root]The template root requires exactly one element.eslint-plugin-vue` 的警告</p><p>处理方法：关闭了 <code>Vetur</code>，Vetur 认为这是 Vue 2 项目，因为它位于 VS Code 工作区中。</p><div class="warning custom-block"><p class="custom-block-title">提示</p><p>参考顶部 <code>vsCode</code> 链接中，打开 <code>首选项 - 设置 - settings.json</code></p></div><div class="language-json"><pre><code><span class="token property">&quot;vetur.validation.template&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">&quot;vetur.validation.script&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">&quot;vetur.validation.style&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
</code></pre></div><h2 id="安装-element-plus" tabindex="-1">安装 element-plus <a class="header-anchor" href="#安装-element-plus" aria-hidden="true">#</a></h2><p><code>element-plus</code> 官网：<a href="https://element-plus.gitee.io/#/zh-CN" target="_blank" rel="noopener noreferrer">https://element-plus.gitee.io/#/zh-CN</a></p><p style="font-weight:bold;">一、npm 安装</p><div class="language-bash"><pre><code><span class="token function">npm</span> <span class="token function">install</span> element-plus --save
</code></pre></div><p style="font-weight:bold;">二、CDN 链接引入</p><div class="language-html"><pre><code><span class="token comment">&lt;!-- 引入样式 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span>
  <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/element-plus/lib/theme-chalk/index.css<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token comment">&lt;!-- 引入组件库 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/element-plus/lib/index.full.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p style="font-weight:bold;">三、引入 Element Plus</p><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">&quot;./App.vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">&quot;./index.css&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> ElementPlus <span class="token keyword">from</span> <span class="token string">&quot;element-plus&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">&quot;element-plus/lib/theme-chalk/index.css&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>ElementPlus<span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&quot;#app&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="安装-sass-sass-loader" tabindex="-1">安装 sass sass-loader <a class="header-anchor" href="#安装-sass-sass-loader" aria-hidden="true">#</a></h2><div class="tip custom-block"><p class="custom-block-title">提示</p><p>安装完成不用配置，经过本地测试，可以直接使用。</p></div><div class="language-bash"><pre><code>cnpm <span class="token function">install</span> sass sass-loader --save-dev
</code></pre></div><h2 id="定义-element-plus-主题" tabindex="-1">定义 Element Plus 主题 <a class="header-anchor" href="#定义-element-plus-主题" aria-hidden="true">#</a></h2><p>Element Plus 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element Plus 的样式变量。新建一个样式文件，例如 <code>element-variables.scss</code>，写入以下内容：</p><p style="font-weight:bold;">一、element-variables.scss</p><p><code>404问题</code>：<a href="https://github.com/element-plus/element-plus/issues/958" target="_blank" rel="noopener noreferrer">在 vite 当中使用主题，字体路径的 ~ 无法正常解析，build 和 dev 均报错</a>临时处理：把字体文件复制到 src 下了，用相对路径引入。</p><div class="warning custom-block"><p class="custom-block-title">提示</p><p>由于 vite 目前（2020.12.17）不支持 <a href="https://element-plus.org/#/zh-CN/component/custom-theme" target="_blank" rel="noopener noreferrer">自定义主题 Element Plus</a> 文档中的写法，若强行使用打包会出现问题：</p></div><div class="language-ts"><pre><code><span class="token comment">/* 改变主题色变量 */</span>
$<span class="token operator">--</span>color<span class="token operator">-</span>primary<span class="token operator">:</span> teal<span class="token punctuation">;</span>

<span class="token comment">/* 改变 icon 字体路径变量，必需 */</span>
$<span class="token operator">--</span>font<span class="token operator">-</span>path<span class="token operator">:</span> <span class="token string">&#39;~element-plus/lib/theme-chalk/fonts&#39;</span><span class="token punctuation">;</span>

@<span class="token keyword">import</span> <span class="token string">&quot;~element-plus/packages/theme-chalk/src/index&quot;</span><span class="token punctuation">;</span>
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">提示</p><p>所以采用 CSS3 <code>:root</code>（:root 选择器选取文档的根元素） 写法，具体方法我会在顶部导航 <code>主题</code> 中进行说明：</p></div><div class="language-css"><pre><code><span class="token comment">/* 定义一个名为 &quot;--main-bg-color&quot; 的属性，然后使用 var() 函数调用该属性： */</span>
<span class="token selector">:root</span> <span class="token punctuation">{</span>
  <span class="token property">--main-bg-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#div1</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-bg-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#div2</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-bg-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>改变变量的颜色：</p><ul><li>当有内联样式或者 js 设置的值时：<code>document.documentElement.style.getPropertyValue</code> 获取到的是实际的值</li><li>当只有 :root 选择器或者 html 选择器时，<code>document.documentElement.style.getPropertyValue</code> 获取到的值为空</li></ul><div class="language-ts"><pre><code><span class="token comment">// 读取变量</span>
document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">&quot;--main-bg-color&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 设置变量</span>
document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span><span class="token string">&quot;--main-bg-color&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;blue&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 删除变量</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">removeProperty</span><span class="token punctuation">(</span><span class="token string">&quot;--main-bg-color&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p style="font-weight:bold;">二、配置目录别名 `@`，方便引用</p><p>在 <code>vite.config.ts</code> 中，根据需求自己定义。注意写法 <code>/@assets/</code>，键必须以 <code>/</code> 斜线开始和结束：</p><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> UserConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vite&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">&quot;path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> viteConfig<span class="token operator">:</span> UserConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
  port<span class="token operator">:</span> <span class="token number">8080</span><span class="token punctuation">,</span>
  hostname<span class="token operator">:</span> <span class="token string">&quot;localhost&quot;</span><span class="token punctuation">,</span>
  open<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  alias<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;/@/&quot;</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;./src&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token string">&quot;/@assets/&quot;</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;./src/assets&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token string">&quot;/@views/&quot;</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;./src/views&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token string">&quot;/@components/&quot;</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;./src/components&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token string">&quot;/@utils/&quot;</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;./src/utils&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> viteConfig<span class="token punctuation">;</span>
</code></pre></div><p style="font-weight:bold;">三、页面中使用</p><p>注意 <code>/@</code> 写法，一定要以 <code>/</code> 开头，否则报 <code>404</code></p><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">&quot;./App.vue&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> ElementPlus <span class="token keyword">from</span> <span class="token string">&quot;element-plus&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">&quot;element-plus/lib/theme-chalk/index.css&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">&quot;/@/style/index.css&quot;</span><span class="token punctuation">;</span>

<span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>ElementPlus<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&quot;#app&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p style="font-weight:bold;">四、动态换肤功能</p><p>使用 <code>ColorPicker 颜色选择器</code>：<a href="https://element-plus.gitee.io/#/zh-CN/component/color-picker" target="_blank" rel="noopener noreferrer">https://element-plus.gitee.io/#/zh-CN/component/color-picker</a>，实现动态换肤功能</p><div class="tip custom-block"><p class="custom-block-title">提示</p><p>请移步顶部导航 <code>主题</code> 中查看详细内容</p></div><h2 id="安装-vue-router-next" tabindex="-1">安装 vue-router-next <a class="header-anchor" href="#安装-vue-router-next" aria-hidden="true">#</a></h2><p style="font-weight:bold;">一、cmd 安装</p><ul><li><a href="https://github.com/vuejs/vue-router-next" target="_blank" rel="noopener noreferrer">vue-router-next 代码仓库（github）</a></li><li><a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer">vue-router-next 文档地址</a></li></ul><div class="language-bash"><pre><code>cnpm <span class="token function">install</span> vue-router@4 --save
</code></pre></div><p style="font-weight:bold;">二、页面中使用</p><blockquote><p>2.1、页面下新增文件夹 <code>src/router/index.ts</code></p></blockquote><p><code>index.ts</code> 中写入：</p><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter<span class="token punctuation">,</span> createWebHashHistory<span class="token punctuation">,</span> RouteRecordRaw <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue-router&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> staticRoutes<span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>RouteRecordRaw<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">&quot;home&quot;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&quot;/@/views/layout/index.vue&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    redirect<span class="token operator">:</span> <span class="token string">&quot;/home&quot;</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">&quot;首页&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">&quot;/home&quot;</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">&quot;home&quot;</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&quot;/@/views/home/index.vue&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span>
          title<span class="token operator">:</span> <span class="token string">&quot;首页&quot;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;/login&quot;</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">&quot;login&quot;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&quot;/@/views/login/index.vue&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">&quot;登陆&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;/:pathMatch(.*)&quot;</span><span class="token punctuation">,</span>
    redirect<span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  history<span class="token operator">:</span> <span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  routes<span class="token operator">:</span> staticRoutes<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> router<span class="token punctuation">;</span>
</code></pre></div><blockquote><p>2.2、<code>main.ts</code> 中引入 <code>src/router/index.ts</code></p></blockquote><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">&quot;./App.vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">&quot;./router&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> ElementPlus <span class="token keyword">from</span> <span class="token string">&quot;element-plus&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">&quot;element-plus/lib/theme-chalk/index.css&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">&quot;/@/theme/index.scss&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;element-plus&quot;</span><span class="token punctuation">;</span>

<span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>ElementPlus<span class="token punctuation">,</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&quot;#app&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><blockquote><p>2.3、页面测试：地址栏输入 2.1 中的路由地址 <code>http://localhost:8080/#/login</code>，出现 <code>login</code> 中的文字就证明配置成功了。</p></blockquote><div class="tip custom-block"><p class="custom-block-title">提示</p><p>地址栏带 <code>#号</code> 与不带 <code>#号</code> ，参考：<a href="https://next.router.vuejs.org/guide/essentials/history-mode.html" target="_blank" rel="noopener noreferrer">next.router history-mode.html</a></p><p>访问路由器和内部的当前路由 setup：<a href="https://next.router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup" target="_blank" rel="noopener noreferrer">Vue 路由器和 Composition API</a></p></div></div></div><footer class="page-footer" data-v-1c2e469b data-v-0673e034><div class="edit" data-v-0673e034><div class="edit-link" data-v-0673e034 data-v-8a069728><a class="link" href="https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/home/fast/index.md" target="_blank" rel="noopener noreferrer" data-v-8a069728>欢迎到 Gitee 上编辑此页！ <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-8a069728><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-0673e034><p class="last-updated" data-v-0673e034 data-v-90112f00><span class="prefix" data-v-90112f00>上次更新:</span><span class="datetime" data-v-90112f00></span></p></div></footer><div class="next-and-prev-link" data-v-1c2e469b data-v-7587c728><div class="container" data-v-7587c728><div class="prev" data-v-7587c728><a class="link" href="/vue-next-admin-doc-preview/home/install/" data-v-7587c728><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-7587c728><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-7587c728>安装</span></a></div><div class="next" data-v-7587c728><a class="link" href="/vue-next-admin-doc-preview/home/eslint/" data-v-7587c728><span class="text" data-v-7587c728>eslint</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-7587c728><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_build_index.md\":\"cf908e9c\",\"config_builtplug_index.md\":\"6fbdc8f3\",\"config_charts_index.md\":\"6b253f7e\",\"config_directive_index.md\":\"eca8fc0a\",\"config_i18n_index.md\":\"52f920f7\",\"config_iconfont_index.md\":\"873ceaa3\",\"config_index.md\":\"17f09bd6\",\"config_layoutconfig_index.md\":\"713fd6e3\",\"config_menu_index.md\":\"ba743976\",\"config_otherissues_index.md\":\"bd715eeb\",\"config_partyplug_index.md\":\"99e0e69a\",\"config_power_index.md\":\"9b5ee6e9\",\"config_route_index.md\":\"0855307d\",\"config_server_index.md\":\"895abd2b\",\"config_support_index.md\":\"ba13e927\",\"config_tagsview_index.md\":\"7f3b9bdb\",\"config_tool_index.md\":\"b5e28201\",\"config_vuex_index.md\":\"0fa37ee1\",\"home_compatible_index.md\":\"7fe73f8e\",\"home_doc_index.md\":\"d5c819dd\",\"home_eslint_index.md\":\"de668d54\",\"home_fast_index.md\":\"716712dd\",\"home_forpeople_index.md\":\"8510cbe7\",\"home_gitpush_index.md\":\"d077e28a\",\"home_index.md\":\"1ee95fc1\",\"home_install_index.md\":\"41dfc4c6\",\"home_introduce_index.md\":\"4950d882\",\"home_prettier_index.md\":\"c5b741b5\",\"home_thank_index.md\":\"b63e2205\",\"home_vscode_index.md\":\"fc526584\",\"index.md\":\"56b80810\"}")</script>
    <script type="module" async src="/vue-next-admin-doc-preview/assets/app.9cc95a61.js"></script>
    
  </body>
</html>